const {
  watch,
  existsSync,
  unlinkSync
} = require('fs');
const {
  outerPath: {
    htmlPath,
    mdPath
  }
} = require('../config');
const {
  createIndexHtml,
  mdToHtml
} = require('../compiler');

function initWatchers(options) {
  watchHtml(options);
  watchMarkDown();
}

//监听/src/html目录
function watchHtml(options) {
  /**
   * watch API: 监听文件或者文件夹的变化,一旦更变就会执行回调
   * watch()
   * @param1 path 需要监听的文件夹或文件路径
   * @param2 callback 当发生变化时候执行回调函数
   *   callback()
   *   @param1 event 变化的时候告诉你什么变化
   *   @param2 event 变化的文件是什么
   */
  watch(htmlPath, function (event, filename) {
    // console.log(event);
    //change

    //文件存在说明文件发生变化了
    if (filename) {
      // console.log(filename, 'change');
      //打印的是发生更改的文件名称 /src/html/welcome.html

      /**
       * 问题：为什么要执行createIndexHtml()?
       * 目前filename变化是无法分辨出目录还是目录里的哪一个文件变化,也无法分辨出目录的文件是否增删,所以统一生成一个新的index.html并重新写入实现内容更新
       */

      /**
       * 监听到/src/html目录下某个文件修改时
       * 重新创建index.html到根目录
       * 1. 重新读取/src/html目录下所有文件
       * 2. 重新读取源文件/temp_files/html/index.html并拿到字符串
       * 3. 重新创建多个<li></li>标签并插入<ul>里
       * 4. 拼接<title><h1><ul><iframe>字符串
       * 5. 重新写入文件index.html并存放到根目录
       * 以上实现了修改/src/html目录下某个文件时马上更新视图(vite reload)
       */
      createIndexHtml(options, event === 'change' && filename);
    }
  });
}

//监听/workspace目录
function watchMarkDown() {
  watch(mdPath, function (event, filename) {
    console.log(filename);

    //监听/workspace目录,文件修改时编译md为html 但是无法监听目录里文件是否被删
    if (filename) {
      //检查当前文件是否存在 存在时说明被修改 不存在时说明被删除
      if (!existsSync(mdPath + '/' + filename)) {
        const removeingFile = htmlPath + '/' + filename.replace('.md', '.html');
        //当 /workspace目录下的md文件被删时,理应清除 /scr/html目录下相同名称的html文件
        //确保检查/scr/html目录下相同名称的html文件是否存在,存在时再清除
        if (existsSync(removeingFile)) {
          /**
           * unlinkSync()
           * 该方法可以删除一个文件
           * @param removeingFile 将被删除的文件
           */
          unlinkSync(removeingFile);
        }

        //中止程序
        return;
      }

      /**
       * 当 /workspace目录下的md文件被修改时执行重新编译操作
       * 此操作可以实现：
       * 1. 在/workspace目录下新建md文件时会看到页面加载了该新增的md文件
       * 2. 在/workspace目录下新建或删除md文件同时同步 /src/html目录新增或删除同名称的html文件
       */
      mdToHtml(filename);
    }
  });
}

module.exports = initWatchers;